import { TimePicker as AntdTimePicker } from 'antd';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.less';
export default class TimePicker extends React.Component<any, any>{
    div: HTMLDivElement;
    constructor(props) {
        super(props);
        this.state = {
            open: false
        }
    }
    openModal = (left, right) => {
        this.toggleOpen({ open: true });
    }
    fixedPosition = (left, top, callback) => {
        this.setState({
            left, top
        }, callback)
    }
    toggleOpen = (state) => {
        this.setState(state, () => {
            if (!state.open) {
                if (this.props.onClose) {
                    this.props.onClose((ReactDOM.findDOMNode(this)).parentElement);
                }
            }
        });
    }
    componentDidMount() {
        this.div = document.createElement('div');
        this.div.className = 'edc-time-picker-mask';
        this.div.style.display = 'none';
        document.body.appendChild(this.div);
    }
    componentDidUpdate() {
        if (this.div) {
            if (this.state.open) {
                this.div.style.display = 'block';
            } else {
                this.div.style.display = 'none';
            }
        }
    }
    componentWillUnmount() {
        document.body.removeChild(this.div);
    }
    render() {
        return (
            <div style={{ display: '' }}>
                <div style={{ position: 'fixed', top: this.state.top, left: this.state.left, visibility: 'hidden' }}>
                    <AntdTimePicker
                        open={this.state.open}
                        format={"HH:mm"}
                        onOpen={this.toggleOpen.bind(this, { open: true })}
                        onClose={this.toggleOpen.bind(this, { open: false })}
                        onChange={this.changeValue}
                        popupStyle={{ left: this.state.left, top: this.state.top }}
                        value={this.props.value}
                    />
                </div>
            </div>
        )
    }
    changeValue = (moment, time) => {
        if (typeof this.props.onChange === 'function') {
            this.props.onChange(time);
        }
    }
}